<template>
	<!-- 登录 wwl -->
	<view class="page">
		<!-- #ifdef MP-WEIXIN -->
		  <ws-wx-privacy
		    id="privacy-popup"
		    @disagree="handleDisagree"
		    @agree="handleAgree"
		    title="用户隐私保护提示"
		    desc="感谢您使用本应用，您使用本应用的服务之前请仔细阅读并同意"
		    protocol="《用户隐私保护指引》"
		    subDesc="。当您点击同意并开始时用产品服务时，即表示你已理解并同意该条款内容，该条款将对您产生法律约束力。如您拒绝，将无法使用相应服务。"
		  ></ws-wx-privacy>
		  <!-- #endif -->
		  
		<!-- 1 -->
		<view class="type_box1" v-if="type == 1 || !type">
			<image class="bgc_img" src="https://xiaoqu.wuguoxin.vip/uploads/web/login01.png" mode="scaleToFill"></image>
			<view class="content_box">
				<!-- <image src="https://xiaoqu.wuguoxin.vip/uploads/web/icon01.png" mode="" class="left_icon" @click="onBack()"  v-if="!getters.invitation_code"></image> -->
				<view class="center">
					<!-- #ifndef H5 || MP-WEIXIN -->
					<!-- <button class="btn btn1" @click="onOneKeyLogin()" :loading='oneKeyLoading'>一键登录</button> -->
					<!-- #endif -->
					<button class="btn btn2" @click="onSmsLogin()">密码或验证码登录</button>
					<!-- #ifdef APP-PLUS || MP-WEIXIN -->
					<view class="third_party weixinaa">
						<!-- #ifdef MP-WEIXIN -->
						<image src="https://xiaoqu.wuguoxin.vip/uploads/web/weixin02.png" mode="" @click="onLoginWX()"></image>
						<button class="btn3" @click="onLoginWX()">微信登录</button>
						<!-- #endif -->
						<!-- #ifdef  APP-PLUS -->
						<image src="https://xiaoqu.wuguoxin.vip/uploads/web/weixin02.png" mode="" @click="onLoginAppWX()"></image>
						<button class="btn3" @click="onLoginAppWX()">微信登录</button>
						<!-- #endif -->
						<!-- #ifdef APP-PLUS  -->
						<!-- <image src="https://xiaoqu.wuguoxin.vip/uploads/web/zhifubao02.png" mode="" @click="onLoginAppAFB()"></image> -->
						<!-- #endif -->
					</view>
					<!-- #endif -->
				</view>
			</view>
		</view>
		<!-- 2 -->
		<view class="type_box2" v-else-if='type == 2'>
			<image class="bgc_img" src="https://xiaoqu.wuguoxin.vip/uploads/web/login03.png" mode="scaleToFill"></image>
			<view class="content_box">
				<!-- @click="changeType()" -->
				<view class="icon" >
					<n-icon name="none" size="46" color="#000"></n-icon>
				</view>
				<view class="name">
					欢迎登录
				</view>
				<view class="row">
					<input type="number" class="input" v-model="infoObj.phone" placeholder="请输入手机号"
						placeholder-style="color:#696767" maxlength="11" />
				</view>
				<view class="row2" v-if="denglu == 1">
					<input type="number" class="input" :password="passwordyn" v-model="infoObj.password" maxlength="14" placeholder="请输入密码"
						placeholder-style="color:#696767" />
					<view class="yanjin" @click="setPassword">
						
						<image class="bgc_imgs" src="/static/image/icon/hideyan.png" mode="scaleToFill" v-if="passwordyn"></image>
						<image class="bgc_imgs" src="/static/image/icon/showyan.png" mode="scaleToFill" v-if="!passwordyn"></image>
						
					</view>
					<button @click='getPassword()' class="btn2">{{passText}}</button>
				</view>
				<view :class="denglu == 2 ? 'row2' : 'row3'" v-if="denglu == 2 || denglu == 3">
					<input type="number" class="input" v-model="infoObj.code" maxlength="6" placeholder="请输入验证码"
						placeholder-style="color:#696767" />
					<button @click='getCode()' class="btn2">{{codeText}}</button>
				</view>
				<view class="row2" v-if="denglu == 3">
					<input type="number" class="input" :password="passwordyn" v-model="infoObj.password" maxlength="14" placeholder="请输入新密码"
						placeholder-style="color:#696767" />
					<view class="yanjin" @click="setPassword">
						<image class="bgc_imgs" src="/static/image/icon/hideyan.png" mode="scaleToFill" v-if="passwordyn"></image>
						<image class="bgc_imgs" src="/static/image/icon/showyan.png" mode="scaleToFill" v-if="!passwordyn"></image>
					</view>
				</view>
				<button class="button_save" :loading='saveLoading' @click="onSave(2)">登录</button>
				<view class="agreement" :class='isShaking ? "shaking":""' @click="isCheckbox = !isCheckbox">
					<view class="checkbox" :class='isCheckbox ? "checkboxA":""'></view>
					<text style="color:#fff">注册登录则表示您同意</text><text class="text1"
						@click.stop="onAgreement('用户注册协议',2)">《用户注册协议》</text><text class="text1"
						@click.stop="onAgreement('隐私协议',3)">《隐私协议》</text>
				</view>
			</view>
		</view>
		<!-- 3 -->
		<view class="type_box3" v-else-if='type == 3'>
			<view class="tabber_box">
				<view class="tabber_box_static" :style="{ height: `${getters.statusBarHeight}px` }"></view>
				<view class="tabber_box_flex" :style="{ height: `${getters.statusBarHeight}px` }"></view>
			</view>
			<view class="tabber_box_title_static">
			</view>
			<view class="tabber_box_title_flex" :style="{ top: `${getters.statusBarHeight}px` }">
				<view class="left" @click="changeType()">
					<n-icon name="back" size="40"></n-icon>
				</view>
				<view class="text">
					手机号绑定
				</view>
			</view>
			<view class="name" style="padding-top: 154rpx;">
				为了方便您下次登录，请先绑定手机号
			</view>
			<view class="row">
				<input type="number" class="input" v-model="infoObj.phone" placeholder="请输入手机号"
					placeholder-style="color:#696767" maxlength="11" />
			</view>
			<view class="row2">
				<input type="number" class="input" v-model="infoObj.code" maxlength="6" placeholder="请输入验证码"
					placeholder-style="color:#696767" />
				<button @click='getCode()'>{{codeText}}</button>
			</view>
			<button class="button_save" :loading='saveLoading' @click="onSave(3)">登录</button>
			<view class="agreement" :class='isShaking ? "shaking":""' @click="isCheckbox = !isCheckbox">
				<view class="checkbox " :class='isCheckbox ? "checkboxA":""'></view>
				<text style="color:#696767">注册登录则表示您同意</text><text class="text1"
					@click.stop="onAgreement('用户注册协议',2)">《用户注册协议》</text><text class="text1"
					@click.stop="onAgreement('隐私协议',3)">《隐私协议》</text>
			</view>
		</view>
		<u-popup v-model="loginWXObj.visible" mode='center' width="80%" height="auto">
			<view class="reject_popup">
				<view class="title">
					<text class="title_text">提示</text>
					<view class="icon" @click='loginWXObj.visible = false'>
						<n-icon name="close" size="38" color="#666"></n-icon>
					</view>
				</view>
				<!-- <view class="text">
					{{loginWXObj.message}}
				</view> -->
				<button :loading='loginWXObj.loading' class="btn" open-type="getPhoneNumber"
					@getphonenumber="getPhoneNumberWX" ref="getPhoneClike">点击授权手机号</button>
			</view>
		</u-popup>
		<!-- shop积分奖励  暂时不用-->
		<!-- <u-popup v-model="integral.visible" mode='center' @close='changeIntegral()'>
			<view class="reject_popup2">
				<image
					src="http://tuzhuang-1304727035.file.myqcloud.com/20211109/HWCfYjUIUg994QRxznRu6aTDpj4W91JrxUwsSH9V.png"
					mode="scaleToFill" class="image" @click="onDecorationGold()"></image>
				<image
					src="http://tuzhuang-1304727035.file.myqcloud.com/20211213/GY5DtSDZdjKiqO8SCw05GmtWrQpObbvOU7jFdly9.png"
					mode="scaleToFill" class="icon" @click="changeIntegral()"></image>
			</view>
		</u-popup> -->
	</view>
</template>

<script>
	import {
		setSignInCode,
		setSignInWechatLogin,
		setOneKeyLogin,
		setSignInWechatLoginApp,
		setSignInWechatLoginApp2
	} from '@/utils/postRequest.js'
	import {
		getUserInfo,
		getDefaultHouse,
		getGenSmsCode
	} from '@/utils/getRequest.js'
	import signInWX from '@/utils/signInWX.js'
	import uPopup from '@/components/u-popup.vue'
	export default {
		components: {
			uPopup
		},
		data() {
			return {
				passwordyn: true,
				denglu:1,//登录方式，默认密码登录
				integral: {
					visible: false,
					isFirst: false
				},
				oneKeyText: '',
				type: 1, // 1 选择 2 验证码  3 三方
				infoObj: {
					phone: undefined,
					code: undefined,
					password: undefined,
				},
				codeText: '获取验证码',
				passText: '忘记密码或注册',
				codeLoading: false,
				timeFUN: null,
				saveLoading: false,
				isCheckbox: false,
				isShaking: false,
				loadingWX: false,
				pathUrl: '',
				oneKeyLoading: false,
				loginWXObj: {
					visible: false,
					info: {},
					loading: false,
					message: '点击绑定手机号'
				},
				isGetOneKeyStyle: false,
				typeApp: 1,
				residentialquarters_id:0,
				residentialquarters_name:'默认小区',
			}
		},
		methods: {
			handleDisagree() {
			  // 处理用户不同意隐私协议的逻辑
			},
			handleAgree() {
			  // 处理用户同意隐私协议的逻辑
			},
			//密码切换显示隐藏
			setPassword(){
				console.log(this.passwordyn,'密码切换显示隐藏')
				if(this.passwordyn){
					this.passwordyn = false;
				}else{
					this.passwordyn = true;
				}
				
			},
			onLoginAppAFB(){
				// if (!this.isCheckbox) {
				// 	this.isShaking = true
				// 	setTimeout(() => {
				// 		this.isShaking = false
				// 	}, 2000)
				// 	return
				// }
				uni.showToast({title:"暂未开通",icon:"none"})
			},
			changeIntegral() {
				this.integral.visible = false
				this.$store.commit('setNewUser', 2)
				uni.redirectTo({
					url: this.pathUrl ? this.pathUrl : '/pages/index/index'
				})
			},
			onDecorationGold() {
				this.integral.visible = false
				this.$store.commit('setNewUser', 2)
				uni.redirectTo({
					url: '/pagesMy/decorationGold/detailed'
				})
			},
			changeType() {
				// #ifdef H5
				this.onBack()
				// #endif
				// #ifndef H5
				this.type = 1
				if (this.timeFUN) clearInterval(this.timeFUN)
				this.codeText = '获取验证码'
				this.codeLoading = false
				this.infoObj.code = ''
				this.infoObj.phone = ''
				this.infoObj.password = ''
				// #endif
			},
			onOneKeyLogin() {
				if (this.oneKeyText) return uni.showToast({
					title: this.oneKeyText,
					icon: 'none'
				})
				this.jv.loginAuth({
						autoFinish: true,
						timeout: 5000
					},
					result => {
						// 结果监听
						if (result.code == 6000) {
							this.onOneKeyPhone(result.content)
						}
					},
					event => {
						// 事件监听
					}
				)
			},
			async onOneKeyPhone(code) {
				if (this.oneKeyLoading) return
				this.oneKeyLoading = true
				try {
					var result = await setOneKeyLogin({
						loginToken: code
					})
					this.$store.commit('setNewUser', result.type)
					this.$store.commit('setToken', result.access_token)
					uni.setStorageSync('TZ_token', result.access_token)
					this.getInfo(2)
				} catch {
					this.oneKeyLoading = false
				}
			},
			getPhoneNumberWX(e) {
				this.loginWXObj.visible = false
				if (!e.detail.iv || !e.detail.encryptedData) return uni.showToast({
					title: "微信手机号授权失败",
					icon: "none"
				});
				this.getPhoneWX(e.detail.iv, e.detail.encryptedData)
			},
			getPhoneWX(iv, data) {
				if (this.loginWXObj.loading) return
				this.loginWXObj.loading = true
				setSignInWechatLogin({
					residentialquarters_id: this.residentialquarters_id,
					residentialquarters_name: this.residentialquarters_name,
					type: 1,//type=2代表接口是服务商小程序，1是图装小程序
					code: this.loginWXObj.info.code,
					avatar: this.loginWXObj.info.avatarUrl,
					iv: iv,
					encryptedData: data,
					name: this.loginWXObj.info.nickName,
					invitation_code: this.$store.state.invitation_code ? this.$store.state.invitation_code : null
				}).then(res2 => {
					this.$store.commit('setNewUser', res2.type)
					this.$store.commit('setToken', res2.access_token)
					uni.setStorageSync('TZ_token', res2.access_token)
					this.loginWXObj.loading = false
					this.getInfo(1)
				}).catch(err => {
					this.loginWXObj.loading = false
				})

			},
			onLoginWX(iv, data) {
				signInWX.getUserAbout().then(res => {
					this.loginWXObj.info = res.info
					this.loginWXObj.info.code = res.wxopenid.code
					// this.loginWXObj.message = err.message
					this.loginWXObj.visible = true
					this.loginWXObj.loading = false
				})
			},
			onSmsLogin() {
				// return uni.showToast({title:'暂未开通',icon:'none'})
				this.type = 2
			},
			
			onLoginAppWX() {
				signInWX.getUserAboutApp().then(res => {
					this.loginWXObj.info = res.info
					this.loginWXObj.info.code = res.wxopenid.code
					uni.showToast({
						title: '授权成功',
						icon: 'none',
						duration: 600
					})
					this.typeApp = 1
					this.getWxAppStatus()
					// setTimeout(() => {
					// 	this.type = 3
					// }, 500)
				})
			},
			async getWxAppStatus (){
				uni.showLoading()
				try{
					var result = await setSignInWechatLoginApp({
						app_openid: this.loginWXObj.info.openId
					})
					if(result.access_token){
						this.$store.commit('setNewUser', result.type)
						this.$store.commit('setToken', result.access_token)
						this.getInfo(1)
					}else{
						
						uni.hideLoading()
						uni.showToast({title:'初次登录请绑定手机号',icon:'none'})
						setTimeout(() => {
							this.type = 3
						}, 500)
					}
				}catch{
					
				}
			},
			onBack() {
				let routes = getCurrentPages()
				if (routes.length == 1) {
					uni.navigateTo({
						url: '/pages/index/index'
					})
				} else {
					uni.navigateBack()
				}
			},
			async onSave(type) {
				if (this.saveLoading) return
				if (!this.infoObj.phone) return uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				})
				if (!(/^1[3-9]\d{9}$/.test(this.infoObj.phone))) {
					return uni.showToast({
						title: '手机号输入错误',
						icon: 'none'
					});
				}
				//判断密码登录还是验证码登录
				if(this.denglu == 1){
					if (!this.infoObj.password) return uni.showToast({
						title: '请输密码',
						icon: 'none'
					})
				}else if(this.denglu == 2){
					if (!this.infoObj.code) return uni.showToast({
						title: '请输验证码',
						icon: 'none'
					})
					if (!(/^([0-9]{4,6})$/.test(this.infoObj.code))) {
						return uni.showToast({
							title: '请输正确的验证码',
							icon: 'none'
						});
					}
				}else if(this.denglu == 3){
					if (!this.infoObj.code) return uni.showToast({
						title: '请输验证码',
						icon: 'none'
					})
					if (!(/^([0-9]{4,6})$/.test(this.infoObj.code))) {
						return uni.showToast({
							title: '请输正确的验证码',
							icon: 'none'
						});
					}
					if (!this.infoObj.password) return uni.showToast({
						title: '请输密码',
						icon: 'none'
					})
				}
				
				if (!this.isCheckbox) {
					this.isShaking = true
					setTimeout(() => {
						this.isShaking = false
					}, 2000)
					return
				}
				if (type == 2) {
					this.saveLoading = true;
					try {
						var result = await setSignInCode({
							residentialquarters_id: this.residentialquarters_id,
							residentialquarters_name: this.residentialquarters_name,
							phone: this.infoObj.phone,
							denglu: this.denglu,
							password: this.infoObj.password,
							code: this.infoObj.code,
							invitation_code: this.$store.state.invitation_code ? this.$store.state
								.invitation_code : null
						})
						console.log(result,'登录返回')
						if(result.code){
							uni.showToast({
								title: result.message,
								icon: 'none'
							});
							this.saveLoading = false
							if(result.code == '0101213'){
								this.denglu = 3;
							}
							return
						}else{
							this.$store.commit('setNewUser', result.type)
							this.$store.commit('setToken', result.access_token)
							this.getInfo()
						}
						
					} catch (err) {
						this.saveLoading = false
					}
				} else {
					if (this.typeApp == 1) {
						this.setAppWx()
					}else{
					
					}

				}

			},
			async setAppWx() {
				try {
					var result = await setSignInWechatLoginApp2({
						phone: this.infoObj.phone,
						code: this.infoObj.code,
						invitation_code: this.$store.state.invitation_code ? this.$store.state
							.invitation_code : null,
						app_openid: this.loginWXObj.info.openId,
						avatar: this.loginWXObj.info.avatarUrl,
						name: this.loginWXObj.info.nickName,
					})
					this.$store.commit('setNewUser', result.type)
					this.$store.commit('setToken', result.access_token)
					this.getInfo(1)
				} catch {
					this.saveLoading = false;
				}
			},
			async getInfo(type) {
				this.saveLoading = true
				if(type == 2) this.oneKeyLoading = true
				if (type) uni.showLoading()
				try {
					var result = await getUserInfo()
					var resD = await getDefaultHouse()
					this.$store.commit('setDefaultHouse', Object.prototype.toString.call(resD) === '[object Object]' ? resD : null)
					this.$store.commit('setUser', result)
					this.$store.commit('setInvitationCode', null)
					uni.showToast({
						title: '登录成功',
						icon: 'none'
					})
					if (this.$store.state.newUser == 1) {
						setTimeout(() => {
							this.oneKeyLoading = false
							this.saveLoading = false
						    uni.hideLoading()
							uni.redirectTo({
								url: '/pages/index/index'
							})
						}, 500)
					} else {
						setTimeout(() => {
							this.saveLoading = false
							this.oneKeyLoading = false
							uni.hideLoading()
							uni.redirectTo({
								url: this.pathUrl ? this.pathUrl : '/pages/index/index'
							})
						}, 500)
					}
				} catch (err) {
					this.saveLoading = false
					this.oneKeyLoading = false
					uni.hideLoading()
				}
			},
			//修改密码
			async getPassword() {
				this.denglu = 3;
			},
			//发送验证码
			async getCode() {
				if (this.codeLoading) return
				if (!this.infoObj.phone) return uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				})
				if (!(/^1[3-9]\d{9}$/.test(this.infoObj.phone))) {
					return uni.showToast({
						title: '手机号输入错误',
						icon: 'none'
					});
				}
				this.codeLoading = true
				try{
					var result = await getGenSmsCode(this.infoObj.phone)
					this.codeText = '发送中'
					let timeNum = 59
					this.timeFUN = setInterval(() => {
						if (timeNum === 0) {
							this.codeLoading = false
							this.codeText = '获取验证码'
							clearInterval(this.timeFUN)
						} else {
							this.codeText = timeNum + 's'
							timeNum = timeNum - 1
						}
					}, 1000)
				}catch{
					this.codeLoading = false
				}
			},
			onAgreement(title, type) {
				uni.navigateTo({
					url: `/pagesHome/richTextDetails?title=${title}&type=${type}`
				})
			},
			getOneKeyStyle() {
				if (uni.getSystemInfoSync().platform == 'ios') return
				this.jv.isInitSuccess(result => {
					// console.log(JSON.stringify(result,'result'))
					if (result.code == 206) {
						this.oneKeyText = '请打开网络数据'
					}
					var _this = this
					this.jv.setCustomUIWithConfigAndroid({
						// setNavColor:0xffffffff,
						setNavColor: 0xff1476fc,
						setNavText: "",
						setNavTextColor: 0xffffffff,
						// setNavReturnImgPath:"https://xiaoqu.wuguoxin.vip/uploads/web/icon01.png",
						setLogBtnText: "本机号码一键登录",
						setLogoHidden: true,
						setNumberColor: 0xff000000,
						setNumberSize: 28,
						// setNumberTextBold:true,
						setLogBtnTextColor: 0xffffffff,
						// setLogBtnWidth:,
						setLogBtnHeight: 55,
						setLogBtnTextSize: 20,
						setPrivacyState: false,
						setPrivacyTextCenterGravity: true,
						setPrivacyOffsetY: 30,
						setAppPrivacyColor: [0xff696767, 0xff1476fc],
						setPrivacyCheckboxSize: 16,
						setPrivacyText: ['注册登录即代表您同意', ''],
						setPrivacyTextSize: 10,
						enableHintToast: true,
						enableHintToastText: '请勾选协议！',
						setPrivacyWithBookTitleMark: true,
						setPrivacyCheckboxInCenter: true,
						setPrivacyNameAndUrlBeanList: [{
								name: '《用户注册协议》',
								url:  _this.$global.h5url +  '?title=用户注册协议&type=2',
							},
							{
								name: '《隐私协议》',
								url:  _this.$global.h5url +  '?title=隐私协议&type=3',
							}
						]
					})
				});

			}

		},
		onReady() {
			//#ifdef APP-PLUS
			if (uni.getSystemInfoSync().platform == 'ios') return
			this.isGetOneKeyStyle = true
			this.jv = uni.requireNativePlugin('JG-JVerification');
			this.jv.init({
					timeout: 7000,
					isProduction: false
				},
				result => {
					let code = result.code;
					let desc = result.content;
				}
			);
			this.getOneKeyStyle()
			//#endif 
		},
		onShow() {
			if (this.isGetOneKeyStyle) this.getOneKeyStyle()
		},
		onLoad(params) {
			console.log(params,'登录注册')
			if(params.residentialquarters_id){
				console.log(params,'登录注册2')
				this.residentialquarters_id = params.residentialquarters_id;
				this.residentialquarters_name = params.residentialquarters_name;
				
			}
			
			this.pathUrl = params.to ? decodeURIComponent(params.to) : ''
			// #ifdef H5
			this.type = 2
			// #endif
			// if(this.$store.state.userInfo &&  this.$store.state.token){
			// 	this.$store.commit('setInvitationCode', null)
			// 	uni.removeStorageSync('TZ_invitation_code')
			// 	uni.showToast({title:'已登录',icon:'none'})
			// 	uni.redirectTo({
			// 		url: this.pathUrl ? this.pathUrl : '/pages/index/index'
			// 	})
			// }
			if (params.invitation_code && params.invitation_code != 'null') {
				this.$store.commit('setInvitationCode', params.invitation_code)
				uni.setStorageSync('TZ_invitation_code', params.invitation_code)
			}

		},
	}
</script>

<style lang="scss" scoped>
	@keyframes shakeX {

		from,
		to {
			transform: translate3d(0, 0, 0);
		}

		10%,
		30%,
		50%,
		70%,
		90% {
			transform: translate3d(-0.5rem, 0, 0);
		}

		20%,
		40%,
		60%,
		80% {
			transform: translate3d(0.5rem, 0, 0);
		}
	}

	.button_save {
		margin: 0 auto;
		width: 672rpx;
		height: 110rpx;
		line-height: 110rpx;
		text-align: center;
		background: $theme;
		color: #fff;
		font-size: 32rpx;
		border-radius: 8px;
	}

	.shaking {
		animation: shakeX 1s;
	}

	.agreement {
		padding: 100rpx 38rpx;
		width: 100%;
		box-sizing: border-box;
		color: #333333;
		font-size: 24rpx;
		line-height: 34rpx;
		text-align: center;

		.text1 {
			color: $theme
		}

		.checkbox {
			display: inline-block;
			width: 24rpx;
			height: 24rpx;
			border-radius: 50%;
			vertical-align: middle;
			border: 2rpx solid #333;
			margin-right: 10rpx;
		}

		.checkbox2 {
			border: 2rpx solid #fff;
		}

		.checkboxA {
			position: relative;
			border: 2rpx solid $theme;
			background-color: $theme;

			&::after {
				position: absolute;
				content: '✓';
				text-align: center;
				color: #fff;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}

	.type_box2 .content_box,
	.type_box3 {
		.icon {
			padding-top: 80rpx;
			margin-bottom: 140rpx;
			padding-left: 38rpx;
		}

		.name {
			padding: 0 38rpx;
			width: 100%;
			box-sizing: border-box;
			font-size: 38rpx;
			font-weight: 700;
			color: #000;
			margin-bottom: 88rpx;
		}

		.row {
			margin: 0 38rpx;
			width: 674rpx;
			border-bottom: 2rpx solid #e9e9e9;
			box-sizing: border-box;

			.input {
				height: 130rpx;
				line-height: 130rpx;
				color: #666;
				font-size: 28rpx;
				width: 100%;
			}
		}

		.row2 {
			margin: 0 38rpx;
			width: 674rpx;
			height: 130rpx;
			line-height: 130rpx;
			border-bottom: 2rpx solid #e9e9e9;
			box-sizing: border-box;
			margin-bottom: 120rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.input {
				height: 130rpx;
				line-height: 130rpx;
				color: #666;
				font-size: 28rpx;
				width: calc(100% - 170rpx);
			}

			>button {
				width: 220rpx;
				height: 64rpx;
				color: #1476F8;
				font-size: 26rpx;
				background-color: #fff;
			}

			.btn2 {
				background-color: transparent;
				margin-left: 20rpx;
			}
		}
		
		.row3 {
			margin: 0 38rpx;
			width: 674rpx;
			height: 130rpx;
			line-height: 130rpx;
			border-bottom: 2rpx solid #b5b5b5;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
		
			.input {
				height: 130rpx;
				line-height: 130rpx;
				color: #666;
				font-size: 28rpx;
				width: calc(100% - 170rpx);
			}
		
			>button {
				width: 160rpx;
				height: 64rpx;
				color: #1476F8;
				font-size: 26rpx;
				background-color: #fff;
			}
		
			.btn2 {
				background-color: transparent;
				margin-left: 20rpx;
			}
		}
	}

	.type_box2 {
		.content_box {
			position: fixed;
			z-index: 2;
			left: 0;
			top: 0;
			height: 100vh;
			width: 100%;

			.row,
			.row2 {
				border-bottom: 0 !important;
				position: relative;

				&::before {
					position: absolute;
					bottom: 0rpx;
					left: 0;
					width: 674rpx;
					height: 2rpx;
					content: '';
					background: linear-gradient(90deg, #c3c3c3 70%, #b7bbb9);
				}
			}

		}

		.bgc_img {
			position: fixed;
			left: 0;
			top: 0;
			height: 100vh;
			width: 100%;
		}
	}

	.type_box3 {
		width: 100%;
		background-color: #fff;

		.tabber_box .tabber_box_flex {
			width: 100%;
			background-color: #fff;
			position: fixed;
			z-index: 999;
			top: 0;
			left: 0;
		}

		.tabber_box_title_static {
			height: 130rpx;
			width: 100%;
			background-color: #fff;
		}

		.tabber_box_title_flex {
			background-color: #fff;
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			z-index: 99;
			height: 130rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 36rpx;
			font-family: PingFang SC, PingFang SC-Semibold;
			// font-weight: 600;
			text-align: center;
			color: #26252B;

			.left {
				position: absolute;
				left: 58rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}

	}

	.type_box1 {
		.bgc_img {
			position: fixed;
			left: 0;
			top: 0;
			height: 100vh;
			width: 100%;
		}

		.content_box {
			position: fixed;
			z-index: 2;
			left: 0;
			top: 0;
			height: 100vh;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			.left_icon {
				position: absolute;
				left: 38rpx;
				top: 100rpx;
				width: 38rpx;
				height: 38rpx;
			}

			.btn {
				width: 490rpx;
				height: 110rpx;
				text-align: center;
				line-height: 110rpx;
				border-radius: 8rpx;
				color: #fff
			}

			.btn1 {
				background: #383838;
				margin-bottom: 42rpx;
			}

			.btn2 {
				background: $theme;
			}

			.third_party {
				margin-top: 99rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 89rpx;
					height: 89rpx;

					&:nth-child(2) {
						margin-left: 87rpx;
					}
				}
			}
		}

	}

	button[loading]::before {
		align-self: center
	}

	button::after {
		border: 0;
		width: 100%;
		text-align: center;
	}

	button {
		display: flex;
		justify-content: center;
		align-item: center;
		padding: 0;
	}

	.reject_popup {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 24rpx 30rpx 60rpx;
		width: 100%;
		box-sizing: border-box;

		.title {
			height: 60rpx;
			line-height: 60rpx;
			padding: 30rpx;
			text-align: center;
			position: relative;

			.title_text {
				font-size: 34rpx;
			}

			.icon {
				position: absolute;
				right: 20rpx;
				top: 0%;
			}
		}

		.text {
			width: 100%;
			box-sizing: border-box;
			// border:2rpx solid #ebebef;
			font-size: 26rpx;
			padding: 20rpx;
			color: #333;
			max-height: 100rpx;
			line-height: 32rpx;

		}

		.btn {
			margin-top: 30rpx;
			width: 80%;
			height: 70rpx;
			line-height: 68rpx;
			// background: #ffffff;
			background-color: $theme;
			// border: 2rpx solid #d5d5d5;
			border-radius: 8rpx;
			color: #fff;
			font-size: 28rpx;
		}
	}

	.reject_popup2 {
		// background-color: #fff;
		position: relative;
		width: 750rpx;
		height: 730rpx;
		display: flex;
		align-items: flex-start;

		.image {
			width: 750rpx;
			height: 648rpx;
		}

		.icon {
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 74rpx;
			height: 74rpx;
		}

	}
	
	.yanjin{
		width: 28px;
		    height: 24px;
		.bgc_imgs{
			width: 100%;
			    height: 100%;
			    display: inline;
			    overflow: hidden;
			    position: relative;
		}
	}
	.weixinaa{
		margin-top: 49px;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    flex-direction: column;
	}
	.btn3{
		background: #148400;
		width: 245px;
		    height: 55px;
		    text-align: center;
		    line-height: 55px;
		    border-radius: 4px;
		    color: #fff;
	}
</style>
